import React, {useEffect, useState} from "react";

import {ActionIcon, Box, Button, Group, Text, TextInput} from "@mantine/core";
import {modals} from "@mantine/modals";
import {IconEdit, IconFilter, IconTrash} from "@tabler/icons-react";

import {DataTable} from "mantine-datatable";
import {AddNodeButton} from "./AddNodeButton";

import {mockNode} from "../mocks/mockNode";

const PAGE_SIZES = [10, 15, 20];

export const NodeTable = ({disabled}: {disabled: boolean}) => {
  const [pageSize, setPageSize] = useState(PAGE_SIZES[0]);

  useEffect(() => {
    setPage(1);
  }, [pageSize]);

  const [page, setPage] = useState(1);
  const [records, setRecords] = useState(mockNode.slice(0, pageSize));

  useEffect(() => {
    const from = (page - 1) * pageSize;
    const to = from + pageSize;
    setRecords(mockNode.slice(from, to));
  }, [page, pageSize]);
  return (
    <Box p="md">
      <Group justify="space-between" pb="md">
        <Text size="sm" fw={500}>
          节点表
        </Text>
        <Group>
          <Button size="xs" leftSection={<IconFilter size={16} />} variant="default">
            展开筛选
          </Button>
          <AddNodeButton disabled={disabled} />
        </Group>
      </Group>
      <DataTable
        //   列渲染
        columns={[
          {accessor: "nodeName", title: "节点名称"},
          {accessor: "nodeId", title: "节点ID"},
          {accessor: "nodeProvince", title: "节点所属省份"},
          {accessor: "nodeRole", title: "节点角色"},
          {accessor: "nodeLabel", title: "节点标签"},
          {accessor: "nodePortCurr", title: "现有端口能力（Gbps）"},
          {accessor: "nodePortMax", title: "最大端口能力（Gbps）"},
          {accessor: "nodePairId", title: "成对标识"},
          {accessor: "nodePairPerc", title: "成对分摊本省比例（%）"},
          {accessor: "dataOrigin", title: "数据来源"},
          {
            accessor: "actions",
            title: "操作",
            render: () => (
              <Group gap="xs" wrap="nowrap" justify="center">
                <ActionIcon
                  variant="subtle"
                  color="blue"
                  size="sm"
                  disabled={disabled}
                  onClick={() => {
                    modals.open({
                      title: "Subscribe to newsletter",
                      children: (
                        <>
                          <TextInput label="Your email" placeholder="Your email" data-autofocus />
                          <Button fullWidth onClick={() => modals.closeAll()} mt="md">
                            Submit
                          </Button>
                        </>
                      ),
                    });
                  }}
                >
                  <IconEdit size={16} stroke={2} />
                </ActionIcon>
                <ActionIcon
                  variant="subtle"
                  color="red"
                  size="sm"
                  disabled={disabled}
                  onClick={() => {
                    modals.open({
                      title: "Subscribe to newsletter",
                      children: (
                        <>
                          <TextInput label="Your email" placeholder="Your email" data-autofocus />
                          <Button fullWidth onClick={() => modals.closeAll()} mt="md">
                            Submit
                          </Button>
                        </>
                      ),
                    });
                  }}
                >
                  <IconTrash size={16} stroke={2} />
                </ActionIcon>
              </Group>
            ),
          },
        ]}
        // 数据来源
        records={records}
        idAccessor="nodeId"
        // 其他配置
        striped // 斑马纹
        withTableBorder // 表格外边框
        borderRadius="xs" // 边框圆角
        withColumnBorders // 列边框
        highlightOnHover // 悬停高亮
        pinFirstColumn // 固定第一列
        pinLastColumn // 固定最后一列
        style={{whiteSpace: "nowrap"}} // 批量设置表格内容：永不换行
        defaultColumnProps={{textAlign: "center", noWrap: true}} // 统一修改为居中对齐（默认左对齐）
        // 分页相关
        totalRecords={mockNode.length}
        recordsPerPage={pageSize}
        page={page}
        onPageChange={(p) => setPage(p)}
        recordsPerPageLabel="每页显示条数"
        recordsPerPageOptions={PAGE_SIZES}
        onRecordsPerPageChange={setPageSize}
      />
    </Box>
  );
};
